<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="gbk" />

		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>�ٲ���</title>
		<meta name="description" content="" />
		<meta name="author" content="wb-dingyanqiang" />
		<style type="text/css">
			* {
				padding: 0;
				margin: 0;
			}
			#json {
				position: relative;
				margin: 20px auto 0;
			}
			#json .list {
				position: absolute;
				visibility:visible;
				width: 190px;
				opacity: 0;
				filter: alpha(opacity=0);
			}			
			#json .list img {
				width: 190px;
			}
		</style>
		<script src="../js/kissy-min.js"></script>
	</head>
	<body>
		<div>
			<div id="json"></div>
			<script>
				var DOM = KISSY.DOM, Event = KISSY.Event,Anim=KISSY.Anim;
				var json = document.getElementById('json');
				var list;
				var imgs;
				var html = "";
				var cellWidth = 190;
				var cellMargin = 10;
				var minH, maxH;
				var minKey, maxKey;
				var isAjax = 1;
				var n;
				var h = [];
				var boxh;
				var subChild = 0;
				var newsubChild;
				
				/***�ж��Ƿ���Ҫ��ȡ�����   �����Ҫֻ����*****/
				function sort(isajax){
					if(isajax==1){
						getjson();	
					}else{
						position();
					}
				}
				/***��ȡ�����*****/
				function getjson() {
					KISSY.io.getJSON('json.json', function(d) {
						if (d.images) {
							imgs = d.images;
							for ( i = 0; i < imgs.length; i++) {
								var div = DOM.create('<div class="list">');
								DOM.html(div, "<p><img src='" + imgs[i].src + "' height='" + imgs[i].height + "' /></p><p>" + imgs[i].name + "</p>");
								DOM.append(div, json);
							}							
							position();
							subChild += imgs.length;
						}					
					});
				}
				
				/***�ж������Ƿ�ı�  �ж��Ƿ�������Ԫ��  ��������в���****/
				function position(){
					var N=n;
					n = getNumber();
					newsubChild=subChild;
					if(N!=n){//������ı� ����Ԫ�ش��²���
						h = [];
						newsubChild=0;
						DOM.css(json, {	width : (cellWidth + cellMargin) * n - cellMargin});											
					}
					pos_suanfa(newsubChild);									
					isAjax=0;
				}
				/****Ԫ�ض�λ�㷨****/
				function pos_suanfa(newsubChild){
					list = DOM.query('#json .list');
					for (var i = newsubChild; i < list.length; i++) {
						boxh = list[i].offsetHeight;
						if (i < n) {
							h[i] = boxh;
							DOM.css(list[i], {top : '0px',left : i * (cellWidth + cellMargin) + 'px'});
							Anim(list[i],{opacity : 1},1,'easeOutStrong').run();
						} else {
							minH = Array.min(h);
							minKey = getarraykey(minH, h);
							h[minKey] += boxh + cellMargin;							
							DOM.css(list[i], {top : minH + cellMargin + 'px',left : minKey * (cellWidth + cellMargin) + 'px'});
							Anim(list[i],{opacity : 1},1,'easeOutStrong').run();
						}
						maxH = Array.max(h);
						maxKey = getarraykey(maxH, h);
						DOM.css('#json', {height : h[maxKey] + 'px'});
					}					
				}
				
				/****��ȡ�ٲ�����Ӧ������****/
				function getNumber(){ 
					var num=Math.floor(document.documentElement.clientWidth / (cellWidth + cellMargin));
					if(num>5){
						num=5;
					}
					return num;
				}
				Array.min = function(array) {
					return Math.min.apply(Math, array);
				}
				Array.max = function(array) {
					return Math.max.apply(Math, array);
				}
				function getarraykey(k, arr) {
					for (v in arr) {
						if (arr[v] == k) {
							return v;
						}
					}
				}
				function resizechange(){
					position();
				}

				KISSY.ready(function(S) {
					sort(isAjax);
				});
				window.onscroll = function() {
					var allH = DOM.docHeight();// �ĵ��ܸ߶�
					var viewH = DOM.viewportHeight();// �ĵ���������߶�
					var scrollH = DOM.scrollTop(window);// �ĵ������߶�
					if (scrollH + viewH + 100 >= allH) {
						console.log(allH-scrollH-viewH);
						isAjax = 1;
						sort(isAjax);
					}
				}
				var re;
				window.onresize=function(){
					clearTimeout(re);
					re=setTimeout(resizechange , 100);
				}			
			</script>
		</div>
	</body>
</html>
